<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术社区商城</title>

    <!-- Import Element Plus CSS -->
    <link rel="stylesheet" href="./Static/element-plus/index.css" />

    <!-- Import Vue 3 -->
    <script src="./Static/js/vue.global.js"></script>

    <!-- Import Element Plus -->
    <script src="./Static/element-plus/index.full.js"></script>

    <style>
        .header-logo {
            display: flex;
            align-items: center;
        }
        .header-logo img {
            height: 60px;
        }
        .header-logo h2 {
            margin-left: 10px;
        }
        .header-nav {
            display: flex;
            align-items: center;
        }
        .header-search {
            margin-left: auto;
        }
        .header-user {
            display: flex;
            align-items: center;
        }
        .header-user img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
        }
        .content-section {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .section {
            width: 30%;
            position: relative; 
        }
        .section-title {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .card-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .card-item {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .card-item img {
            height: 100px;
            width: 100px;
            margin-bottom: 10px;
        }
        .card-item h3 {
            margin: 0;
            font-size: 16px;
        }
        .card-item p {
            margin: 5px 0;
            color: #909399;
        }
        .view-more {
            position: absolute;
            top: 10px; 
            right: 10px;
        }
        .product-carousel {
            width: 30%;
            position: relative; 
        }
        .product-carousel .view-more {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .shop-container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .product-list {
            width: 70%;
        }
        .cart {
            width: 25%;
        }
        .product-card {
            margin-bottom: 20px;
        }
        .product-image {
            width: 100%;
            height: auto;
        }
        .total {
            margin-top: 20px;
            font-weight: bold;
        }
        .cart-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .cart-item img {
            height: 50px;
            width: 50px;
            margin-right: 10px;
        }
        .empty-cart {
            text-align: center;
            color: #909399;
        }
    </style>
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="4" style="display: flex; flex-direction: row; align-items: center">
                    <img src="./Static/images/logo.png" style="height: 60px;">
                    <h2 style="padding-left: 4px;">技术社区</h2>
                </el-col>
                <el-col :span="8">
                    <el-menu default-active="activeIndex" mode="horizontal" style="border-bottom: none !important;">
                        <el-menu-item index="1">首页</el-menu-item>
                        <el-menu-item index="2">文章</el-menu-item>
                        <el-menu-item index="3">课程</el-menu-item>
                        <el-menu-item index="4">商城</el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="8" style="height: 60px; line-height: 60px;" class="hidden-xs-only">
                    <el-input placeholder="请输入关键字"></el-input>
                </el-col>
                <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px;" class="hidden-xs-only">
                    <img src="./Static/images/avatar.png" style="height: 50px; width: 40px;">
                </el-col>
            </el-row>
        </el-header>
        
        <el-main>
            <div class="shop-container">
                <div class="product-list">
                    <el-row :gutter="20">
                        <el-col :xs="12" :sm="8" v-for="product in products" :key="product.id">
                            <el-card class="product-card">
                                <img :src="'./Static/images/' + product.fileName" alt="product image" class="product-image"/>
                                <div class="product-info">
                                    <h3>{{ product.name }}</h3>
                                    <p>价格: ¥{{ product.price }}</p>
                                    <p>库存: {{ product.stock }}</p>
                                    <el-button type="primary" @click="addToCart(product)">加入购物车</el-button>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
                <div class="cart">
                    <h2>购物车</h2>
                    <div v-if="cartItems.length > 0">
                        <el-table :data="cartItems">
                            <el-table-column label="商品">
                                <template #default="scope">
                                    <div class="cart-item">
                                        <img :src="'./Static/images/' + scope.row.fileName" alt="product image" />
                                        <div>{{ scope.row.name }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="单价"></el-table-column>
                            <el-table-column label="数量">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.quantity" :min="1" @change="updateQuantity(scope.row)"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button type="danger" @click="removeFromCart(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="total">
                            总价: ¥{{ totalPrice }}
                        </div>
                        <el-button type="primary" @click="checkout">结算</el-button>
                    </div>
                    <div v-else class="empty-cart">
                        暂无商品
                    </div>
                </div>
            </div>
        </el-main>
        
        <el-footer>
            <el-row>
                <el-col :xs="24" :lg="8">
                    <div>
                        <img src="./Static/images/logo.png" style="height: 60px;">
                    </div>
                    <div>
                        <h2>技术社区</h2>
                        <p>致力于构建一个专业的IT技术交流社区</p>
                    </div>
                </el-col>
                <el-col :xs="24" :lg="8">
                    <div>
                        <el-link type="primary">首页</el-link>
                        <el-link type="primary">文章</el-link>
                        <el-link type="primary">课程</el-link>
                        <el-link type="primary">商城</el-link>
                    </div>
                    <div>
                        <el-link type="primary">关于我们</el-link>
                        <el-link type="primary">使用手册</el-link>
                        <el-link type="primary">隐私条款</el-link>
                        <el-link type="primary">建议反馈</el-link>
                    </div>
                </el-col>
                <el-col :xs="24" :lg="8">
                    <div>
                        <h2>联系我们</h2>
                        <p>电话: 123456789</p>
                        <p>邮箱：software@develop.com</p>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: 20px;">
                <p>软件开发工作室版权所有</p>
            </el-row>
        </el-footer>
    </el-container>
</div>

<script>
    var App = {
        data() {
            return {
                activeIndex: '1',
                products: [
                    { id: 1, name: 'IT社区文创：代码新秀闪耀徽章', price: 10, stock: 200, fileName: 'product01.png' },
                    { id: 2, name: '极简主义帆布包', price: 50, stock: 100, fileName: 'product02.png' },
                    { id: 3, name: '蓝字魔法，解锁IT新风尚—百搭T恤', price: 60, stock: 100, fileName: 'product03.png' },
                    { id: 4, name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 30, stock: 50, fileName: 'product04.png' },
                    { id: 5, name: '文创字母鼠标垫 IT技术社区专属', price: 15, stock: 50, fileName: 'product05.png' },
                    { id: 6, name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 20, stock: 50, fileName: 'product06.png' }
                ],
                cartItems: []
            }
        },
        computed: {
            totalPrice() {
                let totalPrice=0;
                this.cart.forEach((item) => {total += item.quantity*item.price;
                    
                });
                return totalPrice;
                
            }
        },
        methods: {
            addToCart(product) {
                const existingItem = this.cartItems.find(item => item.id === product.id)
                if (existingItem) {
                    existingItem.quantity++
                } else {
                    this.cartItems.push({ ...product, quantity: 1 })
                }
            },
            updateQuantity(row) {
                this.$set(this.cartItems, this.cartItems.indexOf(row), { ...row })
            },
            removeFromCart(row) {
                this.cartItems.splice(this.cartItems.indexOf(row), 1)
            },
            checkout() {
                if (this.totalPrice > 0) {
                    alert(`结算成功，总价为：¥${this.totalPrice}。感谢您的购买！`)
                    this.cartItems = [] 
                } else {
                    alert('购物车为空，无法结算')
                }
            }
        }
    }
    Vue.createApp(App).use(ElementPlus).mount("#app")
</script>
</body>
</html>